<template>
    <div>
        <ul>
            <li v-for="user in showusers" :key="user.id">
                {{ user.name }}
            </li>
        </ul>
        <input type="text" v-model="age" />
        <button @click="changeObj">改变对象</button>
    </div>
</template>

<script>
export default {
    components: {},
    props: {},
    data() {
        return {
            age: 23,
            users: [
                {
                    id: 1,
                    name: '111111',
                    isShow: true
                },
                {
                    id: 2,
                    name: '22222',
                    isShow: false
                },
                {
                    id: 3,
                    name: '33333',
                    isShow: true
                },
                {
                    id: 4,
                    name: '44444',
                    isShow: false
                }
            ],
            obj: {
                name: 'suming',
                age: 33
            }
        };
    },
    computed: {
        showusers() {
            console.log(111);
            return this.users.filter((item) => {
                return item.isShow;
            });
        }
    },
    watch: {
        age() {
            console.log('执行');
        },
        // users() {
        //     console.log('执行对象修改');
        // }
        'obj.name': {
            handler() {
                console.log('执行对象修改');
            },
            immediate: true
        }
    },
    methods: {
        changeObj() {
            // this.users[0].name = 'hahhaha';
            this.obj.name = '曹成';
        }
    },
    created() {},
    mounted() {}
};
</script>
<style scoped></style>
